<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>VSFA</title>
        <link rel="icon" href="/static/image/cat.svg" type="image/svg+xml">
        <link rel="stylesheet" type="text/css" href="/static/css/video.css">
        {% macro getName(index) %}{{
        video[index][1][:-4].split('/')[-1]
        }}{% endmacro %}
    </head>
    <body>
        <div class="v-wrap">
            <div class="view">
                <h1 class="title">{{ getName(index) }}</h1>
            </div>
            <div class="box">

                <div class="video-box">
                    <video class="video" controls="controls" controlslist="nodownload" disablePictureInPicture>
                        <source src="/static/video/{{ video[index][1] }}" type="video/mp4"></source>
                        <p>Your browser does not support the video tag.</p>
                    </video>
                </div>

                <div class="list-box">
                    <ul class="list">
                        {% for i in video %}
                        <li>
                            <a href="/video/v{{ i[0] }}" title="{{ getName(i[0]-1) }}">
                                <div class="item {% if (i[0]-1)==index %} actived {% endif %}">
                                    <div class="ipart">P{{ i[0] }}</div>
                                    <div class="iname">{{ getName(i[0]-1) }}</div>
                                </div>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>
        </div>
    </body>
</html>
